/*
 * @Author: songjian
 * @Date: 2018-11-01 09:25:51
 * @Last Modified by: songjian
 * @Last Modified time: 2018-11-01 11:20:02
 */

import React from 'react';
import { Link } from 'react-router-dom';
import LogoHeader from '../../../components/Header/LogoHeader';

import styles from './index.module.less';

class TabController extends React.Component {
  state = {
    tabs: [
      { id: 0, name: '服务条款' },
      { id: 1, name: '法律声明' },
      { id: 2, name: '隐私政策' },
    ],
    currentIndex: 0,
  }

  itemNav = index => {
    return index === this.state.currentIndex ? styles.active_tab : styles.tab;
  }

  itemContent = index => {
    return index === this.state.currentIndex ? styles.active_text : styles.inactive_text;
  }

  render() {
    const rightContent = (
      <div className={styles.menuBox}>
        <Link className={styles.menuItem} to='/'>首页</Link>
        <Link className={styles.menuItem} to=''>买家中心</Link>
        <Link className={styles.menuItem} to=''>卖家中心</Link>
      </div>
    );
    const { tabs } = this.state;
    return (
      <div>
        <LogoHeader moduleName='规则中心' rightContent={rightContent} />
        <div className={styles.box}>
          <div className={styles.content + ' ' + styles.clearfix}>
            <div className={styles.tabs}>
              {
                tabs.map(item => {
                  return (
                    <div key={item.id} className={this.itemNav(item.id)} onClick={() => { this.setState({ currentIndex: item.id }); }}>
                      {item.name}
                    </div>
                  );
                })
              }
            </div>
            <div className={styles.text}>
              {
                React.Children.map(this.props.children, (item, index) => {
                  return (
                    <div key={index} className={this.itemContent(index)}>{item}</div>
                  );
                })
              }
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default class CompanyProfile extends React.Component {
  render() {
    return (
      <TabController>
        {/* 服务条款 */}
        <div className={styles.company_profile}>
          <h3 className={styles.articleTitle}>产品信息的优化技巧，想排名好必看绝招！</h3>
          <div className={styles.dateTime}>发布时间：2017-07-04</div>
          <div className={styles.word}>
            相信做网络推广或者做网络销售的都是面向全国的，所以我们的标题可以采用地方名称+产品，比如回收行业就很多人会这样发广告标题：
            “广州变压器回收,广州变压器回收公司”，这里说一下，不管是产品还是新闻，标题是最重要的，最好是做到百度收录里的唯一性，就是没有
            任何一个重复的标题首先把产品表达清楚，就上面我们提到的那个标题（广州变压器回收,广州变压器回收公司），我们可以这样写开始：“广
            州变压器回收公司提供广州变压器回收”，欢迎来电咨询，电话：******（有人会疑问为什么要留下电话号码，那是因为可以让百度快照抓取，
            这样就可以直接在百度搜索就能做到你的联系方式，假如某天你的店铺无法访问了，但是客户还是能看到你的联系方式）【注：内容可以写电话号码，标题千万不能写】
          </div>
          <div className={styles.word}>
            产品描述结尾，就是相当于我们作文中的总结，这时候你就要考虑到标题，做到前后相呼应，所以结尾也需要围绕标题来写，（比如很多网站
            都会自动生成结尾），我一般是这样写：广州变压器回收,广州变压器回收公司的详细信息，欢迎来电咨询，我们的网站是http://www.365yishou.com/,
            欢迎访问。文章最后要句号，代表这个内容结束，这样是对SEO友好。
          </div>
          <div className={styles.word}>
            新闻来源一般来自百度或者谷歌，还有就是行业杂志报纸，如果您要原创的话一般采用报纸杂志居多，因为杂志上的文章一般都是原创而且很少
            上网，当然如果没有杂志就百度新闻里面搜索，复制过来加以伪原创。虽然百度经过7月份的调整，鼓励原创，但是我相信绝大部分的人还是没有
            那么好的文笔，所以伪原创依然有效。
          </div>
          <div className={styles.word}>
            发新闻和发产品信息是类似的，标题最好是独一，另外关键词一般在标题的开头或者中间内容，就是伪原创，关键词切忌不要堆积太多，语句要通
            顺，中华文字博大精深，就看您怎么去运用。
          </div>
          <div className={styles.word}>
            网站是标题是一个网站的重点核心，标题的第一个词，一般是核心关键词，围绕这个关键词来做长尾关键词，比如我们行业就是：广州变压器回收公司,
            广州变压器回收价格,广州高价回收变压器，一般来说标题里切勿堆积关键词超过3个，所以当连续有三个关键词的时候第四个就要更换另外一种表达词。
            标题的最后关键词一般是标注公司的全称，不过365易搜网的店铺关键词受限，再者也不是官网，所以我一般标题结尾是公司的简称。切忌标题不宜过长！
          </div>
          <div className={styles.word}>
            2010年开始，百度经过调整，关键词在搜索当中的权重已没有标题的那么多了，有一个时期很多人在讨论这个问题，其实我觉得，关键词就是为标题和
            描述服务的，类似承上启下的作用，所以关键词尽量把核心关键词和长尾关键词填满。
          </div>
          <div className={styles.word}>
            描述这个很好写，因为中365易搜网给我们的字符比较宽松，所以这时候你可以把你的核心关键词和其他标题里没有写过的长尾关键词放到描述里面，这样
            您心理里几乎所有产品关键词都能在百度快照展现出来，但是描述写的一定要通顺，因为它只是是一句简单的概括，还有避免**第一,中国**，著名***，
            这些都是骗子常用的词语就尽量少用。
          </div>
          <div className={styles.word}>
            关键词的布局就是整个首页的关键词密度，一般来说最主要还是上面的标题，关键词，和描述里面占了很大的比重，所以，接下来我们要在产品分类和新闻
            标题中控制好关键词的密度，一般不建议超过10%，百度建议是在8%以内，但是也有很多超出这个比例排名也很好的。店铺的相册要上传图片，可以是证书，
            也可以是产品图或工程案例，适当的加点链接
          </div>
        </div>
        {/* 法律声明 */}
        <div>第二部分</div>
        {/* 隐私政策 */}
        <div className={styles.company_profile}>
          <h3 className={styles.articleTitle}>产品信息的优化技巧，想排名好必看绝招！</h3>
          <div className={styles.dateTime}>发布时间：2017-07-04</div>
          <div className={styles.word}>
            相信做网络推广或者做网络销售的都是面向全国的，所以我们的标题可以采用地方名称+产品，比如回收行业就很多人会这样发广告标题：
            “广州变压器回收,广州变压器回收公司”，这里说一下，不管是产品还是新闻，标题是最重要的，最好是做到百度收录里的唯一性，就是没有
            任何一个重复的标题首先把产品表达清楚，就上面我们提到的那个标题（广州变压器回收,广州变压器回收公司），我们可以这样写开始：“广
            州变压器回收公司提供广州变压器回收”，欢迎来电咨询，电话：******（有人会疑问为什么要留下电话号码，那是因为可以让百度快照抓取，
            这样就可以直接在百度搜索就能做到你的联系方式，假如某天你的店铺无法访问了，但是客户还是能看到你的联系方式）【注：内容可以写电话号码，标题千万不能写】
          </div>
          <div className={styles.word}>
            产品描述结尾，就是相当于我们作文中的总结，这时候你就要考虑到标题，做到前后相呼应，所以结尾也需要围绕标题来写，（比如很多网站
            都会自动生成结尾），我一般是这样写：广州变压器回收,广州变压器回收公司的详细信息，欢迎来电咨询，我们的网站是http://www.365yishou.com/,
            欢迎访问。文章最后要句号，代表这个内容结束，这样是对SEO友好。
          </div>
          <div className={styles.word}>
            新闻来源一般来自百度或者谷歌，还有就是行业杂志报纸，如果您要原创的话一般采用报纸杂志居多，因为杂志上的文章一般都是原创而且很少
            上网，当然如果没有杂志就百度新闻里面搜索，复制过来加以伪原创。虽然百度经过7月份的调整，鼓励原创，但是我相信绝大部分的人还是没有
            那么好的文笔，所以伪原创依然有效。
          </div>
          <div className={styles.word}>
            发新闻和发产品信息是类似的，标题最好是独一，另外关键词一般在标题的开头或者中间内容，就是伪原创，关键词切忌不要堆积太多，语句要通
            顺，中华文字博大精深，就看您怎么去运用。
          </div>
          <div className={styles.word}>
            网站是标题是一个网站的重点核心，标题的第一个词，一般是核心关键词，围绕这个关键词来做长尾关键词，比如我们行业就是：广州变压器回收公司,
            广州变压器回收价格,广州高价回收变压器，一般来说标题里切勿堆积关键词超过3个，所以当连续有三个关键词的时候第四个就要更换另外一种表达词。
            标题的最后关键词一般是标注公司的全称，不过365易搜网的店铺关键词受限，再者也不是官网，所以我一般标题结尾是公司的简称。切忌标题不宜过长！
          </div>
          <div className={styles.word}>
            2010年开始，百度经过调整，关键词在搜索当中的权重已没有标题的那么多了，有一个时期很多人在讨论这个问题，其实我觉得，关键词就是为标题和
            描述服务的，类似承上启下的作用，所以关键词尽量把核心关键词和长尾关键词填满。
          </div>
          <div className={styles.word}>
            描述这个很好写，因为中365易搜网给我们的字符比较宽松，所以这时候你可以把你的核心关键词和其他标题里没有写过的长尾关键词放到描述里面，这样
            您心理里几乎所有产品关键词都能在百度快照展现出来，但是描述写的一定要通顺，因为它只是是一句简单的概括，还有避免**第一,中国**，著名***，
            这些都是骗子常用的词语就尽量少用。
          </div>
          <div className={styles.word}>
            关键词的布局就是整个首页的关键词密度，一般来说最主要还是上面的标题，关键词，和描述里面占了很大的比重，所以，接下来我们要在产品分类和新闻
            标题中控制好关键词的密度，一般不建议超过10%，百度建议是在8%以内，但是也有很多超出这个比例排名也很好的。店铺的相册要上传图片，可以是证书，
            也可以是产品图或工程案例，适当的加点链接
          </div>
        </div>
      </TabController>
    );
  }
}
